<template>
  <el-drawer
    title="租户管理"
    direction="rtl"
    ref="drawer"
    @close="beforeClose"
    size="80%"
    :visible.sync="visible">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="企业资质" name="certiinfo">
          <certi-info :activeId="activeId" ref="certiinfoTab"></certi-info>
        </el-tab-pane>
        <el-tab-pane label="组织架构" name="deptinfo">
          <dept-info ref="deptinfoTab"></dept-info>
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="roleinfo">
          <role-info ref="roleinfoTab"></role-info>
        </el-tab-pane>
        <el-tab-pane  label="证书管理" name="certList">
          <certificate-list :activeId="activeId" ref="certListTab"></certificate-list>
        </el-tab-pane>
        <el-tab-pane label="证书流转" name="certTrans">
          <certificate-transaction ref="certTransTab"></certificate-transaction>
        </el-tab-pane>
        <el-tab-pane label="证书延期" name="certRenewal">
          <certificate-renewal ref="certRenewalTab"></certificate-renewal>
        </el-tab-pane>
        <el-tab-pane label="操作日志" name="certOpralog">
          <certificate-opration-log :tenant-id="tenantId" ref="certOpralogTab"></certificate-opration-log>
        </el-tab-pane>
      </el-tabs>
  </el-drawer>
</template>

<script>
  import DeptInfo from './deptinfo'
  import CertiInfo from './certiinfo'
  import RoleInfo from './roleinfo'
  import CertificateList from './certificateinfolist'
  import CertificateAdd from './certificateinfoadd'
  import CertificateRenewal from './certificateinforenewal'
  import CertificateTransaction from './certificateinfotransaction'
  import CertificateOprationLog from './CertificateOprationLog'
export default {
    data () {
      return {
        activeName: 'certiinfo',
        activeId: '',
        tabPosition: 'left',
        tenantId: '',
        visible: false
      }
  },
    components: {
      CertificateOprationLog,
      DeptInfo,
      CertiInfo,
      RoleInfo,
      CertificateList,
      CertificateRenewal,
      CertificateTransaction
    },
    created () {
    // this.handleClick()
    // this.init()
    // this.visible = true
    // this.activeName = 'certiinfo'
    // this.$refs['certiinfoTab'].init(this.tenantId)

    },
    mounted () {
      // this.$nextTick(() => {
      //   console.log(this.$refs['certiinfoTab']);
      //   console.log(12121);
      // });
    },
    methods: {
      beforeClose () {
        this.$parent.clickClone()
      },
      init (tenantId) {
        // console.log(111555);
        this.visible = true
        this.tenantId = tenantId
        if (this.activeName == 'certiinfo') {
          this.activeId = tenantId
        }
        if (this.activeName === 'certList') {
          this.activeId = tenantId
        }
        // console.log(this.$refs['certiinfoTab']);
        // this.$refs['certiinfoTab'].init(this.tenantId)
      },

      handleClick (tab, event) {
        // console.log(111);
        // console.log(this.$refs['certiinfoTab']);
        this.activeName = tab.name
        this.$refs[this.activeName + 'Tab'].init(this.tenantId)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
